<template>
  <div class="content">
    <div class="row">
      <div class="label">是否开启：</div>
      <el-checkbox v-model="enabled" size="large" @change="onChangeEnabled" />
    </div>
    <div class="row">
      <div class="label">日期选择：</div>
      <el-date-picker
        class="input"
        v-model="currDate"
        type="datetime"
        size="small"
        format="YYYY-MM-DD HH:mm:ss"
        value-format="YYYY-MM-DD HH:mm:ss"
        @change="onChangeDate"
      />
    </div>
    <div class="row" style="justify-content: flex-start">
      <div class="label">时间进度：</div>
      <el-slider
        class="input"
        v-model="timeVal"
        size="small"
        :min="0"
        :max="86399"
        :step="1"
        :show-tooltip="false"
        @input="onChangeProgress"
      />
    </div>
    <div class="row">
      <div class="btn" @click="play">
        <SvgIcon icon="play" class="icon"></SvgIcon>播放
      </div>
      <div class="btn" @click="stopPlay" style="margin-left: 10px">
        <SvgIcon icon="pause" class="icon"></SvgIcon>暂停
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from "vue";
import {
  ininShadows,
  getDateBySeconds,
  setShadows,
  startPlay,
  stopPlay,
  dateFormat,
} from "../../../../static/CIM/BQGIS-calculate/BGGIS-shadows";
import SvgIcon from "../../../components/SvgIcon.vue";
import { useStore } from "../../../store/store";

const store = useStore();
const currDate = ref(dateFormat());
const timeVal = ref(getSecondsByDate(new Date()));
const enabled = ref(false);
let shadows;

onMounted(() => {
  viewer.scene.requestRenderMode = false
  shadows = ininShadows(viewer, (date) => {
    timeVal.value = getSecondsByDate(date);
    currDate.value = dateFormat(date);
  });
  enabled.value = shadows.enabled;
});

function onChangeEnabled(enabled) {
  shadows.enabled = enabled;
}

function onChangeProgress(seconds) {
  const date = getDate(seconds);
  currDate.value = dateFormat(date);
  setShadows(date);
}

function onChangeDate(date) {
  const d = new Date(date);
  timeVal.value = d.getHours() * 3600 + d.getMinutes() * 60 + d.getSeconds();
  setShadows(d);
}

function getDate(seconds) {
  const { hours, minutes, second } = getDateBySeconds(seconds);
  const date = new Date(currDate.value);
  return new Date(
    date.getFullYear(),
    date.getMonth(),
    date.getDate(),
    hours,
    minutes,
    second
  );
}

function getSecondsByDate(date) {
  return date.getHours() * 3600 + date.getMinutes() * 60 + date.getSeconds();
}

function play() {
  startPlay(new Date(currDate.value));
}
</script>


<style lang="scss" scoped>
.content {
  width: 300px;
  padding: 0 10px;
  font-size: 12px;
  color: #fff;
}
.row {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  .label {
    width: 20%;
  }
  .input {
    margin-left: 10px;
    width: 70%;
  }
}
.btn {
  background: rgba(30, 144, 255, 0.3);
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
  border-radius: 5px;
  cursor: pointer;
  .icon {
    margin-right: 10px;
  }
}
.btn:hover {
  background: rgba(30, 144, 255, 0.8);
}
:deep(.el-input__inner) {
  color: #fff;
}
:deep(.el-input__wrapper) {
  background-color: transparent;
  // box-shadow:0 0 0 1px rgba(30, 144, 255, 0.8);
}
:deep(.el-input-number__decrease) {
  // border-right: rgba(30, 144, 255, 1);
  background-color: transparent;
  color: #fff;
}
:deep(.el-input-number__increase) {
  // border-left: rgba(30, 144, 255, 1);
  background-color: transparent;
  color: #fff;
}
</style>

<style>
.marsGreenGradientPnl {
  color: #fff;
  background: linear-gradient(
    180deg,
    rgba(30, 144, 255, 0.3) 0%,
    rgba(0, 0, 0, 0.3) 100%
  );
}
</style>